333 게임 UX/UI
플레이어 흐름, 화면 정보 구조, 버튼, HUD, 피드백, 접근성을 설계해 사용하기 쉬운 게임 인터페이스를 제작하는 과정이다.
0. 교육을 하는 이유와 궁극적인 목표
이 교육의 궁극적 목표는 학습자가 보기 좋은 화면을 만드는 데서 끝나지 않고, 플레이어가 목표와 상태를 즉시 이해하고 실수 없이 조작할 수 있는 게임 UX/UI를 설계하는 것이다.
참고한 유료형 교육 흐름
- 한국·미국·영국·유럽의 민간 게임개발·XR·AI 콘텐츠 아카데미처럼 짧은 이론보다 매 차시 결과물을 완성하는 흐름
- 전문 게임 부트캠프처럼 기획, 구현, 테스트, 피드백, 발표를 하나의 제작 사이클로 연결하는 흐름
- AI·VR 실무 워크숍처럼 실제 도구명, 제작 파이프라인, 오류 수정, 저작권 확인을 함께 지도하는 흐름
- 상용 콘텐츠 제작 스튜디오처럼 사용자 경험, 안전성, 몰입도, 포트폴리오 정리를 함께 평가하는 흐름
1일차 · 플레이어 흐름과 정보 구조 · 2시간
게임 UX 분석
게임 UX/UI 과정의 1단계 실전 제작 활동
| 구분 | 세부 내용 | 실천·실습 방법 |
|---|---|---|
| 목표 1 | 플레이 흐름 맵 작성 | 처음 실행, 튜토리얼, 플레이, 실패, 성공, 재시작까지의 흐름을 화면 단위로 그린다. 플레이어가 매 순간 알아야 할 정보와 나중에 알아도 되는 정보를 구분해 UI 우선순위를 정한다. |
| 목표 2 | HUD 정보 설계 | 체력, 점수, 시간, 미션, 아이템 중 필요한 항목만 골라 HUD 배치를 스케치한다. 화면 가장자리, 중앙, 하단 버튼 영역을 비교하고 조작을 방해하는 위치를 제거한다. |
| 사용 플랫폼 | Figma, Unity UGUI, Unreal Widget Blueprint, TextMeshPro, Canva, Google Forms, Miro |
|---|---|
| 강사 스펙 | 게임 UI 설계, 와이어프레임 제작, 사용성 테스트, Unity·Unreal UI 적용 지도 가능자 |
| 수업대상 | 중학생 이상, 게임기획·디자인·개발 입문 학생 |
| 소요시간 | 총 6시간 · 1일 2시간씩 3일 편성 |
| 준비물 | Figma 계정, UI 와이어프레임 템플릿, 테스트용 게임 화면, 색상 대비 체크표 |
| 산출물 | 게임 UX/UI 3일 완성 프로젝트, 제작 기록, 테스트 피드백 반영본 |
| 평가방법 | 실습 완성도 35%, 핵심 구조 이해 25%, 테스트·개선 25%, 발표·정리 15% |
2일차 · UI 와이어프레임과 인터랙션 · 2시간
사용 가능한 화면 제작
게임 UX/UI 과정의 2단계 실전 제작 활동
| 구분 | 세부 내용 | 실천·실습 방법 |
|---|---|---|
| 목표 1 | Figma UI 시안 제작 | 시작 화면, 플레이 화면, 결과 화면을 Figma 프레임으로 만들고 버튼·텍스트·아이콘 크기를 통일한다. 색상 대비와 글자 크기를 점검해 작은 화면에서도 읽히는지 확인한다. |
| 목표 2 | 버튼과 피드백 설계 | 버튼 기본, Hover, 클릭, 비활성화 상태를 디자인하고 사용자가 누를 수 있는 요소를 명확히 구분한다. 성공, 실패, 경고, 보상 피드백을 색상·소리·애니메이션 중 두 가지 이상으로 설계한다. |
| 사용 플랫폼 | Figma, Unity UGUI, Unreal Widget Blueprint, TextMeshPro, Canva, Google Forms, Miro |
|---|---|
| 강사 스펙 | 게임 UI 설계, 와이어프레임 제작, 사용성 테스트, Unity·Unreal UI 적용 지도 가능자 |
| 수업대상 | 중학생 이상, 게임기획·디자인·개발 입문 학생 |
| 소요시간 | 총 6시간 · 1일 2시간씩 3일 편성 |
| 준비물 | Figma 계정, UI 와이어프레임 템플릿, 테스트용 게임 화면, 색상 대비 체크표 |
| 산출물 | 게임 UX/UI 3일 완성 프로젝트, 제작 기록, 테스트 피드백 반영본 |
| 평가방법 | 실습 완성도 35%, 핵심 구조 이해 25%, 테스트·개선 25%, 발표·정리 15% |
3일차 · 사용성 테스트와 엔진 적용 · 2시간
UX/UI 개선 결과물
게임 UX/UI 과정의 3단계 실전 제작 활동
| 구분 | 세부 내용 | 실천·실습 방법 |
|---|---|---|
| 목표 1 | UI 사용성 테스트 | 테스터에게 조작 설명 없이 화면을 사용하게 하고 잘못 누른 버튼, 읽지 못한 문구, 길을 잃은 흐름을 기록한다. 테스트 결과에 따라 버튼 위치, 문구, 색상, 안내 순서를 수정한다. |
| 목표 2 | Unity 또는 Unreal 적용 | Unity UGUI 또는 Unreal Widget Blueprint에 핵심 UI를 배치하고 실제 게임 장면과 연결한다. 완성 화면을 시연하며 사용성 문제와 수정 근거를 발표한다. |
| 사용 플랫폼 | Figma, Unity UGUI, Unreal Widget Blueprint, TextMeshPro, Canva, Google Forms, Miro |
|---|---|
| 강사 스펙 | 게임 UI 설계, 와이어프레임 제작, 사용성 테스트, Unity·Unreal UI 적용 지도 가능자 |
| 수업대상 | 중학생 이상, 게임기획·디자인·개발 입문 학생 |
| 소요시간 | 총 6시간 · 1일 2시간씩 3일 편성 |
| 준비물 | Figma 계정, UI 와이어프레임 템플릿, 테스트용 게임 화면, 색상 대비 체크표 |
| 산출물 | 게임 UX/UI 3일 완성 프로젝트, 제작 기록, 테스트 피드백 반영본 |
| 평가방법 | 실습 완성도 35%, 핵심 구조 이해 25%, 테스트·개선 25%, 발표·정리 15% |